<template>
  <div id="emp-manager">
    <el-card shadow="always">
      <h1>广告管理</h1>
      <!-- 查询条件 -->
      <el-divider></el-divider>
      <div id="search">
        <el-form
          size="small"
          :inline="true"
          :model="keyWords"
          class="demo-form-inline"
          align="left"
        >
          <el-form-item label="广告标题">
            <el-input v-model="keyWords.title" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="广告状态">
            <el-select v-model="keyWords.status" placeholder="状态">
              <el-option value="-1" label="任意状态"></el-option>
              <el-option value="0" label="无效"></el-option>
              <el-option value="1" label="有效"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="广告分类">
            <el-select v-model="keyWords.categoryId" placeholder="分类">
              <el-option value="0" label="所有分类"></el-option>
              <el-option
                v-for="c in cateList"
                :value="c.id"
                :label="c.name"
                :key="c.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchAdver" plain="">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="openAdd" plain="">添加</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="danger" :disabled="bantchSelect.length <= 0" @click="removeAdver" plain="">批量删除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 员工数据 -->
      <el-divider></el-divider>
      <el-table
        :data="adverList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" label="序号" width="100" type="index" />
        <el-table-column align="center" label="广告号" width="100" prop="id" />
        <el-table-column align="center" label="广告分类" width="200" prop="cateName" />
        <el-table-column align="center" label="广告标题" width="200" prop="title" />
        <el-table-column align="center" label="广告地址" width="300" prop="url" />
        <el-table-column align="center" label="海报" width="300" prop="pic" />
        <el-table-column align="center" label="状态" width="100">
          <template slot-scope="scope">
            {{ scope.row.status == "0" ? "无效" : "有效" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="排序" width="100" prop="sortOrder" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="openUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="removeAdver(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页数据 -->
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        :total="total"
      >
      </el-pagination>

      <!-- 数据修改和添加 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancelSave" align="left">
        <el-form :model="adver">
          <el-form-item label="所属分类" :label-width="formLabelWidth">
            <el-select v-model="adver.categoryId" placeholder="请选择分类">
              <el-option
                v-for="c in cateList"
                :label="c.name"
                :value="c.id"
                :key="c.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="广告标题" :label-width="formLabelWidth">
            <el-input v-model="adver.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="广告地址" :label-width="formLabelWidth">
            <el-input v-model="adver.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="海报" :label-width="formLabelWidth">
            <el-input v-model="adver.pic" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-select v-model="adver.status" placeholder="请选择状态">
              <el-option label="无效" value="0"></el-option>
              <el-option label="有效" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input v-model="adver.sortOrder" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelSave">取 消</el-button>
          <el-button type="primary" @click="confirmSave">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import adverApi from "@/api/advertisement";
import cateApi from "@/api/category";

export default {
  data() {
    return {
      adverList: [], //广告列表
      cateList: [], //分类列表
      total: 0,
      pageNum: 1, //页号
      pageSize: 5, //页面大小
      keyWords: {}, //查询关键字
      adver: {}, //用于添加广告的数据
      title: "添加广告", //操作标题
      dialogFormVisible: false, //操作框显示
      formLabelWidth: "100px",
      bantchSelect: [],
    };
  },

  created() {
    //初始化信息
    this.init();
  },

  methods: {
    init() {
      this.pageNum = 1;
      this.pageSize = 5;
      this.keyWords = {};
      this.getAllCate();
      this.searchAdver();
    },

    handleSelectionChange(val) {
        this.bantchSelect = [];
        for(let i of val) {
            this.bantchSelect.push(i.id);
        }
      
    },

    //删除广告
    removeAdver(row) {
      if (row.id) {
        this.bantchSelect = [];
        this.bantchSelect.push(row.id);
      }

      console.log(this.bantchSelect);
      

      this.$confirm("此操作将永久删除这些广告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          adverApi.remove(this.bantchSelect).then((resp) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });

            this.bantchSelect = []
            this.init()
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //打开添加
    openAdd() {
      this.title = "添加广告";
      this.dialogFormVisible = true;
    },

    //打开修改
    openUpdate(row) {
      this.getAdver(row.id);
      this.title = "修改广告";
      this.dialogFormVisible = true;
    },

    //取消添加/修改
    cancelSave() {
      this.adver = {};
      this.dialogFormVisible = false;
    },

    //确认添加/修改
    confirmSave() {
      if (this.adver.id) {
        //有id则为修改
        this.updateAdvertisement();
      } else {
        this.addAdvertisement();
      }
    },

    //添加广告
    addAdvertisement() {
      adverApi.addAdver(this.adver).then((resp) => {
        if (resp.data.code == 0) {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        }

        //信息初始化
        this.init();
        this.adver = {};
        this.dialogFormVisible = false;
      });
    },

    //修改广告
    updateAdvertisement() {
      adverApi.updateAdver(this.adver).then((resp) => {
        if (resp.data.code == 0) {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        }

        //信息初始化
        this.init();
        this.adver = {};
        this.dialogFormVisible = false;
      });
    },

    //查询所有分类
    getAllCate() {
      cateApi.list().then((resp) => {
        this.cateList = resp.data.data.list;
      });
    },

    //查询所有广告信息
    searchAdver() {
      adverApi.search(this.pageNum, this.pageSize, this.keyWords).then((resp) => {
        this.adverList = resp.data.data.pageModel.list;
        this.total = resp.data.data.pageModel.total;
      });
    },

    getAdver(id) {
      adverApi.getAdver(id).then((resp) => {
        this.adver = resp.data.data.adver;
      });
    },

    //页面大小改变
    handleSizeChange(size) {
      this.pageSize = size;
      this.searchAdver();
    },

    handleCurrentChange(num) {
      this.pageNum = num;
      this.searchAdver();
    },
  },
};
</script>

<style>
#emp-manager {
  width: 95%;
  text-align: center;
  margin: 0 auto;
}

#search .el-form-item .el-input {
  width: 120px;
}
</style>
